styled components [Project] Pre-onboarding: Sir.Loin 📆 2022년 1월 27일 ~ 1월 29일 / Front-end 4명 Front-end 상품과 관련된 기본 정보, 등록, 주문, 배송, 프로모션 등 여러 옵션을 관리할 수 있는 사이트를 구현한 프로젝트. 필터 함수와 커스텀 토글 버튼을 활용하여 상품의 노출을 변경하는 것이 주된 기능이다. Material-UI 라이브러리 활용하여 달력 및 시간 지정 컴포넌트. 설정한 기간이 만료되었을 경우, ... Reactstyled componentsReact 타입스크립트에서 styled-components Prop 타입 지정하기 styled 함수 제네릭의 첫 번째로 아래처럼 넣어주면 됩니다. 예를들어서 아래와 같이 Block 이라는 컴포넌트를 만든다고 해봅시다. 근데 이 컴포넌트를 사용하려고 보니까 자동 완성이 안 됩니다. 이건 우리가 앞에서 집어 넣은 제네릭이 Template Literal Tagged Function 안에서 쓰는 Interpolation Function 타입으로만 들어가서 그렇습니다. 이 타입은 ... typescriptstyled componentsReactReact React를 다시 시작하며 현재 회사에선 Vue만 사용했다. 이러다 React는 아예 까먹을 것 같아 팀원들을 꼬셔 React를 도전하기로 한다. 그나마 한번 React 프로젝트를 진행/운영 경험이 있는 나와 다르게 나머지 3명은 React를 한번도 해본적 없거나 신입.. 힘내자 본론으로 돌아가.. 다같이 모여 여러번의 회의끝에 스펙 정의를 했다. 되겟지? 일단 결정. 하나하나 공부하며 시작해보자.... react-querystyled componentstailwindstorybooknextjstypescriptmuimobxreactjsjestjest Emotion & Styled-components 이와 같은 jsx문법을 @emotion/styled 패키지가 인식하지 못하는 것 같았다. 하지만 한 시간을 삽질한 결과.. 먼저 루트 폴더에서 아래와 같이 바벨 플러그인을 설치 한다. yarn add --dev @emotion/babel-plugin 루트 폴더에 .babelrc 파일을 만든 후 다음과 같이 작성해준다. npm-trends를 보면 styled-components 보다 emoti... JavaScriptCSSstyled componentsTILReactemotionCSS [React:ts] 재사용 가능한 UI 컴포넌트 만들기 코드스테이츠에서 파이널 프로젝트를 진행하면서 UI 컴포넌트 부분에 많이 관여를 했었다. 여러가지 컴포넌트를 만들면서 느꼈던 점이 있었다. 사이트에 모달창을 쓸 일이 많았는데, 각각의 모달창 컴포넌트들을 일일이 하나씩 만들어서 사용하다보니 굉장히 번거로웠다. 진행한 프로젝트를 예로 들어보면, 로그인 모달, 회원가입 모달, 글 삭제 모달, 회원 탈퇴 모달, 공유하기 모달 등등 각각의 코드 뭉치를... styled componentsUI 컴포넌트typescriptUI ComponentUI Component [42byte] React + TypeScript로 프로젝트 시작하기 이름에서 알 수 있듯이 타입스크립트는 자바스크립트 기반에 타입 문법을 추가한 프로그래밍 언어이다. 자바스크립트 기반인 만큼, 타입과 관련된 문법만 익히고 나니 금방 적응할 수 있었다. 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 변환되는데, 런타임에서 오류를 발견하는 자바스크립트와 다르게 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기... Reactstyled components42bytetypescript42byte styled-components, theme 1-1.make styled.js use in App.js 36번, 47~52번 주의깁게 볼것. 사용! background-color:${props=> props.theme.mainBgColor}... styled componentsreact nativethemereact native styled-components attrs()에 대하여 프로젝트에서 .attrs()을 사용하는 것을 보았는데 이름에서 대충 attributes를 받아다 쓰는 건가보다 싶었다 그래서 좀 더 구체적인 사용법을 알아보기로 하였다 ⚠ 회사에서 모르는 내용이나 미흡한 부분을 보완하기 위해 시작한 블로그이므로 styled-components 자체에 대한 설명은 생략합니다 attrs()패턴과 굉장히 유사하기 때문에 나도 처음 코드를 봤을 때 두 개의 차이를 ... Propsattrsstyled componentsattributepaasing props directlyProps styled-components 사용해 보기 styled-components? javascript에서 css를 사용 할 수 있도록 도와주는 스타일링 프레임워크 ✅ Component 단위로 스타일링 가능: 클래스명 중복 방지 ✅ 조건부 스타일링: 컴포넌트의 props를 전달받아 사용 가능 ✅ 확장 스타일링: 새로운 Component를 선언하는 것 뿐만 아니라, 기존의 Component에 스타일을 추가하는 것도 가능 ✅ SASS의 중첩 스... babelReactstyled componentsReact [회고] Styled-Components를 사용하며 Props 전달 : Style 컴포넌트를 만들어 전달받은 props를 이용해 선택적으로 CSS를 사용할 수 있음 스타일 컴포넌트를 사용하면서 가장 신경이 쓰였던 부분은 바로 네이밍 이었다. 첫번째 방법으로는 컴포넌트에 특정 기능에 맞는 이름을 넣어 모든 태그에 네이밍을 해주는 방식이다. 공통 컴포넌트를 사용할때 스타일 컴포넌트와의 구분이 힘들어졌다. 다음으로 사용해본 방식은 가장 상위의 태그... 회고TILstyled components프로젝트 구조네이밍TIL Styled-components - (4)애니메이션 및 Selector 기본 사용법 우선 keyframes를 불러와준다. import { keyframes } from "styled-components"; keyframes을 활용해 애니메이션을 정의한다. 적용할 스타일컴포넌트에 animation속성에 적용한다. animation: ${animation} 1.5s linear infinite; 예시 스타일컴포넌트 안의 Selector 모든 태그를 스타일 컴포넌트화... Reactstyled componentsReact styled-components 를 emotion 으로 변환하기 지금까지는 CSS-in-JS 인, styled-components 를 사용해왔었다. 최근에 emotion 으로 사용하는 분들이 점점 늘어가는 추세인 것 같아서 나도 이번 기회에 emotion에 대하여 알아보려한다. styled-components와 매우 비슷하여 배움에 있어서는 큰 어려움이 없어보였으나, 직접 부딪혀 봐야 알 것 같다. 기존에 styled-components로 반응형 레이아웃... 포트폴리오styled componentsReactemotionReact CSS의 진화과정 CSS CSS는 HTML을 꾸며주기 위해 사용하는 스타일시트 언어 단점은 어떤 CSS가 적용될지 예측하기 어렵고, 코드 재사용이 어렵다. SCSS @import @import 구문을 사용하면 다른 sass 파일을 불러올 수 있다. 장점은 css 파일을 쉽게 모듈화 하고, 나누어 작업이 가능하다. SCSS 단점 파일을 분리했지만 중첩 선언이 있는 경우 어떤 것이 먼저 적용될지 가늠이 되지 않는... css-modulesCSSscssstyled componentsBEMBEM [Web template] Next.js with-styled-components (2) 로 css-in-js 방식인 styled-component를 적용하기 _documents.tsx 파일은 Next.js 에서 제공하는 document를 커스터마이징 할 수 있다 Next.js 페이지들은 마크업 정의를 건너뛰기 때문에 <html>, <body>, <head> 등을 필수적으로 작업해야 할 때는 _documents.tsx 파일을 필수적으로 사용해야 한다 예시) <Html lang='... Web template프로젝트next.jsprojectstyled componentsWeb template React에서의 CSS in JS 그래서 styled-components라는 라이브러리를 통해 스타일을 바로 입혀서 컴포넌트를 만들어 사용할 수 있다. 예를 들어 div박스를 하나 만들고 싶다면 변수명 = styled.div`` 라는걸 사용하면 된다. 백틱 안에 적용할 css 스타일을 넣어주면 된다. 예를 들어 위에서 만든 Title 요소가 여러가지 색깔 버전으로 필요할 경우, 제목요소를 여러번 복붙하는 것이 아닌 props... styled componentsSassSass How to target child tag w/styled-components styled-components로 구현 중 nth-child() 타케팅이 안된다. class 이름으로 .name:nth-child() 타겟팅은 무척이나 쉬운데 ... 본글은 styled-components 기본 지식을 가짐을 전제로 작성한다. 일단 아래는 html styled-components 컴포넌트를 만든다. item을 타겟팅 해본다. class="item" .item:first-chi... styledselectorreact selectornth-childstyled componentsnth-child [React #9] styled-components로 효과적인 스타일링 현대 앱이 컴포넌트를 기반으로 발전해가면서 CSS 스타일링 방법론 또한 '컴포넌트를 기반'으로 재구성되고 있다. 이러한 발전 속에서 등장한 패러다임이 'CSS-in-JS'이며 그 중 가장 인기있는 라이브러리가 'sytled-components'이다. 'styled-components' 또한 이전 기술의 문제점을 보완하기 위해 등장했다. pure CSS의 문제점을 보완하기 위해 CSS prep... styled componentsJavaScriptReactCSSTILCSS Styled-Components 이해하기 styled-components는 className 기반이다. 개발자 도구에서 확인할 수 있듯이 styled-component는 하나의 유니크한 className에 적용된다. App 컴포넌트(리액트 컴포넌트)의 Wrapper 컴포넌트(styled-component)에 유니크한 className WspdT가 적용된 것을 확인할 수 있다, 리액트 컴포넌트 혹은 서드 파티 라이브러리가 제공하는 컴... Reactstyled componentsReact [react-native] styled-components 자동완성 1. styled-components 설치 2. 코드 최상단에 import 해주기 3. vscode 마켓플레이스에서 vscode-styled-components 검색 4. 위 사진과 같이 vscode 버전에 맞는 vscode-styled-components 설치... styled components자동완성react nativereact native
[Project] Pre-onboarding: Sir.Loin 📆 2022년 1월 27일 ~ 1월 29일 / Front-end 4명 Front-end 상품과 관련된 기본 정보, 등록, 주문, 배송, 프로모션 등 여러 옵션을 관리할 수 있는 사이트를 구현한 프로젝트. 필터 함수와 커스텀 토글 버튼을 활용하여 상품의 노출을 변경하는 것이 주된 기능이다. Material-UI 라이브러리 활용하여 달력 및 시간 지정 컴포넌트. 설정한 기간이 만료되었을 경우, ... Reactstyled componentsReact 타입스크립트에서 styled-components Prop 타입 지정하기 styled 함수 제네릭의 첫 번째로 아래처럼 넣어주면 됩니다. 예를들어서 아래와 같이 Block 이라는 컴포넌트를 만든다고 해봅시다. 근데 이 컴포넌트를 사용하려고 보니까 자동 완성이 안 됩니다. 이건 우리가 앞에서 집어 넣은 제네릭이 Template Literal Tagged Function 안에서 쓰는 Interpolation Function 타입으로만 들어가서 그렇습니다. 이 타입은 ... typescriptstyled componentsReactReact React를 다시 시작하며 현재 회사에선 Vue만 사용했다. 이러다 React는 아예 까먹을 것 같아 팀원들을 꼬셔 React를 도전하기로 한다. 그나마 한번 React 프로젝트를 진행/운영 경험이 있는 나와 다르게 나머지 3명은 React를 한번도 해본적 없거나 신입.. 힘내자 본론으로 돌아가.. 다같이 모여 여러번의 회의끝에 스펙 정의를 했다. 되겟지? 일단 결정. 하나하나 공부하며 시작해보자.... react-querystyled componentstailwindstorybooknextjstypescriptmuimobxreactjsjestjest Emotion & Styled-components 이와 같은 jsx문법을 @emotion/styled 패키지가 인식하지 못하는 것 같았다. 하지만 한 시간을 삽질한 결과.. 먼저 루트 폴더에서 아래와 같이 바벨 플러그인을 설치 한다. yarn add --dev @emotion/babel-plugin 루트 폴더에 .babelrc 파일을 만든 후 다음과 같이 작성해준다. npm-trends를 보면 styled-components 보다 emoti... JavaScriptCSSstyled componentsTILReactemotionCSS [React:ts] 재사용 가능한 UI 컴포넌트 만들기 코드스테이츠에서 파이널 프로젝트를 진행하면서 UI 컴포넌트 부분에 많이 관여를 했었다. 여러가지 컴포넌트를 만들면서 느꼈던 점이 있었다. 사이트에 모달창을 쓸 일이 많았는데, 각각의 모달창 컴포넌트들을 일일이 하나씩 만들어서 사용하다보니 굉장히 번거로웠다. 진행한 프로젝트를 예로 들어보면, 로그인 모달, 회원가입 모달, 글 삭제 모달, 회원 탈퇴 모달, 공유하기 모달 등등 각각의 코드 뭉치를... styled componentsUI 컴포넌트typescriptUI ComponentUI Component [42byte] React + TypeScript로 프로젝트 시작하기 이름에서 알 수 있듯이 타입스크립트는 자바스크립트 기반에 타입 문법을 추가한 프로그래밍 언어이다. 자바스크립트 기반인 만큼, 타입과 관련된 문법만 익히고 나니 금방 적응할 수 있었다. 타입스크립트 컴파일러 또는 바벨(Babel)을 통해 자바스크립트 코드로 변환되는데, 런타임에서 오류를 발견하는 자바스크립트와 다르게 코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기... Reactstyled components42bytetypescript42byte styled-components, theme 1-1.make styled.js use in App.js 36번, 47~52번 주의깁게 볼것. 사용! background-color:${props=> props.theme.mainBgColor}... styled componentsreact nativethemereact native styled-components attrs()에 대하여 프로젝트에서 .attrs()을 사용하는 것을 보았는데 이름에서 대충 attributes를 받아다 쓰는 건가보다 싶었다 그래서 좀 더 구체적인 사용법을 알아보기로 하였다 ⚠ 회사에서 모르는 내용이나 미흡한 부분을 보완하기 위해 시작한 블로그이므로 styled-components 자체에 대한 설명은 생략합니다 attrs()패턴과 굉장히 유사하기 때문에 나도 처음 코드를 봤을 때 두 개의 차이를 ... Propsattrsstyled componentsattributepaasing props directlyProps styled-components 사용해 보기 styled-components? javascript에서 css를 사용 할 수 있도록 도와주는 스타일링 프레임워크 ✅ Component 단위로 스타일링 가능: 클래스명 중복 방지 ✅ 조건부 스타일링: 컴포넌트의 props를 전달받아 사용 가능 ✅ 확장 스타일링: 새로운 Component를 선언하는 것 뿐만 아니라, 기존의 Component에 스타일을 추가하는 것도 가능 ✅ SASS의 중첩 스... babelReactstyled componentsReact [회고] Styled-Components를 사용하며 Props 전달 : Style 컴포넌트를 만들어 전달받은 props를 이용해 선택적으로 CSS를 사용할 수 있음 스타일 컴포넌트를 사용하면서 가장 신경이 쓰였던 부분은 바로 네이밍 이었다. 첫번째 방법으로는 컴포넌트에 특정 기능에 맞는 이름을 넣어 모든 태그에 네이밍을 해주는 방식이다. 공통 컴포넌트를 사용할때 스타일 컴포넌트와의 구분이 힘들어졌다. 다음으로 사용해본 방식은 가장 상위의 태그... 회고TILstyled components프로젝트 구조네이밍TIL Styled-components - (4)애니메이션 및 Selector 기본 사용법 우선 keyframes를 불러와준다. import { keyframes } from "styled-components"; keyframes을 활용해 애니메이션을 정의한다. 적용할 스타일컴포넌트에 animation속성에 적용한다. animation: ${animation} 1.5s linear infinite; 예시 스타일컴포넌트 안의 Selector 모든 태그를 스타일 컴포넌트화... Reactstyled componentsReact styled-components 를 emotion 으로 변환하기 지금까지는 CSS-in-JS 인, styled-components 를 사용해왔었다. 최근에 emotion 으로 사용하는 분들이 점점 늘어가는 추세인 것 같아서 나도 이번 기회에 emotion에 대하여 알아보려한다. styled-components와 매우 비슷하여 배움에 있어서는 큰 어려움이 없어보였으나, 직접 부딪혀 봐야 알 것 같다. 기존에 styled-components로 반응형 레이아웃... 포트폴리오styled componentsReactemotionReact CSS의 진화과정 CSS CSS는 HTML을 꾸며주기 위해 사용하는 스타일시트 언어 단점은 어떤 CSS가 적용될지 예측하기 어렵고, 코드 재사용이 어렵다. SCSS @import @import 구문을 사용하면 다른 sass 파일을 불러올 수 있다. 장점은 css 파일을 쉽게 모듈화 하고, 나누어 작업이 가능하다. SCSS 단점 파일을 분리했지만 중첩 선언이 있는 경우 어떤 것이 먼저 적용될지 가늠이 되지 않는... css-modulesCSSscssstyled componentsBEMBEM [Web template] Next.js with-styled-components (2) 로 css-in-js 방식인 styled-component를 적용하기 _documents.tsx 파일은 Next.js 에서 제공하는 document를 커스터마이징 할 수 있다 Next.js 페이지들은 마크업 정의를 건너뛰기 때문에 <html>, <body>, <head> 등을 필수적으로 작업해야 할 때는 _documents.tsx 파일을 필수적으로 사용해야 한다 예시) <Html lang='... Web template프로젝트next.jsprojectstyled componentsWeb template React에서의 CSS in JS 그래서 styled-components라는 라이브러리를 통해 스타일을 바로 입혀서 컴포넌트를 만들어 사용할 수 있다. 예를 들어 div박스를 하나 만들고 싶다면 변수명 = styled.div`` 라는걸 사용하면 된다. 백틱 안에 적용할 css 스타일을 넣어주면 된다. 예를 들어 위에서 만든 Title 요소가 여러가지 색깔 버전으로 필요할 경우, 제목요소를 여러번 복붙하는 것이 아닌 props... styled componentsSassSass How to target child tag w/styled-components styled-components로 구현 중 nth-child() 타케팅이 안된다. class 이름으로 .name:nth-child() 타겟팅은 무척이나 쉬운데 ... 본글은 styled-components 기본 지식을 가짐을 전제로 작성한다. 일단 아래는 html styled-components 컴포넌트를 만든다. item을 타겟팅 해본다. class="item" .item:first-chi... styledselectorreact selectornth-childstyled componentsnth-child [React #9] styled-components로 효과적인 스타일링 현대 앱이 컴포넌트를 기반으로 발전해가면서 CSS 스타일링 방법론 또한 '컴포넌트를 기반'으로 재구성되고 있다. 이러한 발전 속에서 등장한 패러다임이 'CSS-in-JS'이며 그 중 가장 인기있는 라이브러리가 'sytled-components'이다. 'styled-components' 또한 이전 기술의 문제점을 보완하기 위해 등장했다. pure CSS의 문제점을 보완하기 위해 CSS prep... styled componentsJavaScriptReactCSSTILCSS Styled-Components 이해하기 styled-components는 className 기반이다. 개발자 도구에서 확인할 수 있듯이 styled-component는 하나의 유니크한 className에 적용된다. App 컴포넌트(리액트 컴포넌트)의 Wrapper 컴포넌트(styled-component)에 유니크한 className WspdT가 적용된 것을 확인할 수 있다, 리액트 컴포넌트 혹은 서드 파티 라이브러리가 제공하는 컴... Reactstyled componentsReact [react-native] styled-components 자동완성 1. styled-components 설치 2. 코드 최상단에 import 해주기 3. vscode 마켓플레이스에서 vscode-styled-components 검색 4. 위 사진과 같이 vscode 버전에 맞는 vscode-styled-components 설치... styled components자동완성react nativereact native